<template>
    <div class="card" >
        <el-card height="220px;" class="card-container" >
            <img
                    class="white--text"
                    height="151px"
                    style="text-align:center;width: 100%;"
                    src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                    @click="selectModel">
            <div class="modelData-info">
                <div class="modelData-info-container">
                    <div class="modelData-name">{{card.artifactId}}</div>
                    <div class="modelData-describe" style="width: 180px;text-align: left;padding-top: 18px"
                         :title=card.name>{{card.name}}
                    </div>
                    <div class="modelData-key">
                        <!--<el-tag v-for="tag in keywords" :key="tag" size="mini" style="margin-left: 2px">{{tag}}-->
                        <!--</el-tag>-->{{card.keywords}}
                    </div>
                </div>
                <div class="modelData-option">
                    <div class="modelData-icon" id="info" title="模型信息" @click="viewModelInfo(card.artifactId)">
                        <i class="fa fa-info-circle" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "modelCard",
        data() {
            return {
                modelSelect:false
            }
        },
        computed:{
            // keywords() {
            //     if (this.card.keywords.indexOf('，') !== -1) {
            //         return this.card.keywords.split("，");
            //     } else if (this.card.keywords.indexOf('、') !== -1) {
            //         return this.card.keywords.split("、");
            //     } else {
            //         return this.card.keywords.split(";")
            //     }
            // },
        },
        props: {
            card: {
                type: Object,
                default: function () {
                    return {}
                }
            }
        },

        methods: {
            viewModelInfo(id) {
                let url = 'http://192.168.1.5:9000/dbfg/parallel/get/'+ id;
                let modelData = {url:url,visible:true};
                this.$Bus.$emit('modelInfo',modelData);
            },
            selectModel(){
                if(this.modelSelect){
                    this.$emit('next',this.card.artifactId);
                }
            }
        },
        created() {
            let that = this;
            this.$Bus.$on('modelSelect',res =>{
                if(res !== undefined){
                    that.modelSelect = res;
                }
            })
        }
    }
</script>

<style>
    .el-card__body {
        padding: 0;
    }

    .card {
        margin-left: 25px;
        /*padding: 5px 10px 5px 10px;*/
        width: 260px;
    }

    .card-container {
        /*margin-left: 25px;*/
        /*!*padding: 5px 10px 5px 10px;*!*/
        /*width: 260px;*/
    }

    .card:hover {
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
    }

    .modelData-info {
        height: 69px;
        /*padding: 8px 12px 0;*/
        padding: 0 12px 0;
        overflow: hidden;
        color: #303c46;
        position: relative;
    }

    .modelData-info-container {
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .modelData-name {
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 24px;
        text-align: left;
        font-size: 14px;
        line-height: 22px;
        position: relative;
        margin-right: 102px;
    }

    .modelData-key {
        position: absolute;
        right: 2px;
        top: 21px;
        height: 14px;
        font-size: 12px;
        line-height: 20px;
        text-align: left;
        color: #8a9194;
    }

    .modelData-option {
        position: absolute;
        right: 10px;
        bottom: 3px;
    }

    .modelData-icon {
        margin: 0;
        border: 0;
        padding-right: 3px;
        font-size: 14px;
        box-sizing: border-box;
        position: relative;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
    }

    .modelData-icon i:hover {
        color: #3f87f7;
        cursor: pointer;
    }

    /*#delete i:hover {*/
    /*color: #fe6970;*/
    /*}*/

    .data-option-container {
        position: absolute;
        z-index: 9;
        width: 118px;
        background-color: #fff;
        border-radius: 3px;
        bottom: 30px;
        right: -20px;
        border: 1px solid #d4d8db;
        text-align: left;
        color: #8a9194;
        padding: 6px 0;
    }

    .option-icon {
        width: 18px;
        text-align: center;
        float: left;
        margin-right: 6px;
    }
</style>